<template>
  <div class="spec-bg" @click="specBg">
    <div class="spec">
      <div class="spec-close iconfont icon-close">
        <i class=""></i>
      </div>
      <div class="spec-title">{{food.dishes_name}}</div>
      <div class="spec-con">
        <div class="spec-list clearfix" v-for="(spec,I) in food.attribute" :key="spec.id">
          <div class="list-title">{{spec.attribute}}</div>
          <div :class="[item.spec_name == reguName[I] ? 'checked':'','dish-spec']" v-for="(item,index) in spec.spec" :key="index" @click="selectSpec(item,I)">{{item.spec_name}}</div>
        </div>
      </div>
      <div class="spec-bottom">
        <div class="bottom-left">
          <div class="spec-price">{{food.price * food.discount + specPrice(food.spec)}}</div>
          <div class="spec-type" v-show="reguName.length != 0">( {{selectSpecName}} )</div>
        </div>
        <div class="bottom-right">
          <div class="join-cart" v-if="selectFood.count == 0" @click="joinCart">加入购物车</div>
          <div class="shop-control" v-else>
            <shop-control :food="selectFood"></shop-control>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import shopControl from './control';
import Vue from 'vue';

export default {
  name: 'dishSpecs',
  components: {
    shopControl
  },
  props: {
    food: Object
  },
  data() {

    return {
      reguSpec: [],
      reguName: [],
      selectFood: {count:0},
      name:"123123",
      selectSpecName: ''
    }
  },
  mounted(){
    this._initSpec()
  },
  methods: {
    specBg(event) {
      //console.log(event)
      if(event.target.className == 'spec-bg' || event.target.className == 'spec-close iconfont icon-close'){
        this.$emit('closeSpec')
      }
    },

    //加入购物车
    joinCart() {
      let selectFood = JSON.parse(JSON.stringify(this.selectFood))
      //this.selectFood.count++
      this.$store.commit('joinCart',selectFood)
      this.$set(this.selectFood,'count',1)
      this.name="神奇"
      console.log(this.$store.state.goodsList)
      console.log(this.selectFood)
    },
    
    //验证vuex里是否存在选择的多规格
    hadSpec() {
      let specFlag = true;
      if(this.$store.state.goodsList.length > 0){
        for( let i=0; i<this.$store.state.goodsList.length;i++){
          if(this.$store.state.goodsList[i].id == this.food.id){
            this.$store.state.goodsList[i].spec.forEach( (val1,h) => {
              this.reguSpec.forEach( (val2,j) => {
                if(h==j){
                  if(val1.spec_name != val2.spec_name){
                    specFlag = false;
                    return false;
                    console.log(1)
                  }else{
                    //specFlag = true;
                    console.log(2)
                  }
                }
              })
            })
          }else{
            specFlag = false
          }
          if(specFlag){
            this.selectFood = this.$store.state.goodsList[i]
            console.log('相同:',this.selectFood)
            break;
          }else{
            specFlag = true;
            this.food.count = 0
            this.selectFood = this.food
            console.log('不同:',this.selectFood)
          }
        }
      }
    },

    //选择多规格分类
    selectSpec(spec,I) {
      let price = 0;
      let sName = [];
      this.reguSpec[I] = spec;
      this.$set(this.reguName,I,spec.spec_name)
      this.$set(this.food,'spec',this.reguSpec)
      console.log(this.reguSpec)
      this.reguSpec.forEach( res => {
        sName.push(res.spec_name)
      })
      this.selectSpecName = sName.join("，")
      this.hadSpec()  
    },

    //计算多规格价
    specPrice(spec){
      if(spec){
        let price = 0;
        spec.forEach( val => {
          price += Number(val.spec_price)
        });
        return price
      }else{
        return 0
      } 
    },

    //初始化规格选择
    _initSpec() {
      this.food.attribute.forEach( (res,i) => {
        this.reguSpec[i] = res.spec[0]
        this.$set(this.reguName,i,res.spec[0].spec_name)
        this.$set(this.food,'spec',this.reguSpec)
      })
      if(this.$store.state.goodsList.length == 0){
        this.food.count = 0
      }
      this.selectFood = this.food
      this.hadSpec()

      let sName = []
      this.reguSpec.forEach( res => {
        sName.push(res.spec_name)
      })
      this.selectSpecName = sName.join("，")
      console.log(this.selectFood)
    }
  }
} 
</script>

<style lang="stylus" scoped>
@import "~styles/common.styl"
  .spec-bg
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background rgba(0,0,0,0.5)
    z-index 100
    display flex
    justify-content center
    align-items center
    .spec 
      width 94%
      background #ffffff
      border-radius 10px
      overflow hidden
      position relative
      .spec-close
        position absolute
        width 30px
        height 30px
        line-height 30px
        text-align center
        top 2px
        right 2px
        font-size 16px
      .spec-title
        line-height: 25px
        padding: 12px 15px 10px
        border-bottom: none
        font-size 18px
        text-align center
      .spec-con
        width 100%
        padding 8px 15px 0px
        min-height 2.5rem
        .spec-list
          padding-bottom 10px
          .list-title
            font-size 14px
            margin-bottom 10px
          .dish-spec
            font-size 13px
            min-width 30%
            margin-right 2%
            float left
            padding 7px 12px
            border-radius 3px
            border 1px solid #e3e3e3
            text-align center
            margin-bottom 10px
            color #333
            &.checked
              border 1px solid $themeColor
              background $themeColor
              color #fff
      .spec-bottom
        align-items: center;
        padding: 0 0 0 15px;
        position relative
        margin-top 10px
        &::before
          content ''
          position: absolute;
          right: 0;
          left: 0;
          -webkit-transform: scaleY(.5);
          transform: scaleY(.5);
          -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
          top: 0;
          border-top: 1px solid #e3e3e3;
        .bottom-left
          line-height 45px
          float left
          box-sizing border-box
          width 65%
          .spec-price
            float left
            color $fontColor
            font-size 20px
            margin-left 5px
            font-weight bold
            &::before
              content '¥'
              font-size 14px
              word-spacing: normal
              letter-spacing: normal
          .spec-type
            float left
            font-size 12px
            margin-left 5px
        .bottom-right
          float left
          width 35%
          height 49px
          .join-cart
            background $themeColor
            color #ffffff
            text-align center
            line-height 49px
            font-weight bold
            font-size 15px
          .shop-control
            float: right;
            width: 1.4rem;
            height: 0.44rem;
            margin-top: 0.28rem
            margin-right 15px

</style>